<!-- 火箭dmeo -->
<template>  
    <div>  
      <!-- 使用 Vue 的 transition 组件来添加过渡效果 -->  
      <transition name="rocket">  
        <div class="bbss" v-if="showRocket">  
          <!-- 这里原本可能有一些内容，比如火箭的图片 -->  
          <img src="../assets/640 (58).jpg" style="width: 50px;height: 50px;" alt="Rocket">  
        </div>  
      </transition>  
        
      <!-- 你可以在这里添加其他内容或按钮来触发火箭升空事件 -->  
      <button @click="launchRocket">发射火箭</button>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        showRocket: true, // 控制火箭是否显示的变量  
      };  
    },  
    methods: {  
      launchRocket() {  
        // 开始动画  
        this.showRocket = false; // 通过改变数据触发过渡效果  
    
        // 延迟 1 秒后跳转至 ./Login.html 页面  
        // 注意：这里使用了 setTimeout 而不是 Vue 的 nextTick，因为我们需要等待 DOM 更新和过渡效果完成后跳转  
        setTimeout(() => {  
            // 跳转页面方法等不对。自己修改
        //   window.location.replace('./Login.vue'); // 跳转页面  
        }, 1000); // 假设过渡效果在 1 秒内完成  
      },  
    },  
    // 如果你需要定义过渡效果的 CSS，可以在这里添加  
    // 或者在你的 CSS 文件中添加  
  };  
  </script>  
    
  <style scoped>  
  /* 定义过渡效果的 CSS */  
  .rocket-enter-active, .rocket-leave-active {  
    transition: all 1s; /* 假设动画持续 1 秒 */  
  }  
  .rocket-enter, .rocket-leave-to {  
    /* 初始状态或结束状态，这里我们让火箭向上移动 */  
    transform: translateY(-1000%); /* 注意这里可能需要调整，因为百分比通常基于元素本身的高度 */  
    position: relative; /* 确保元素可以相对于其正常位置移动 */  
  } 
.bbss{
    width: 100px;
    height: 100px;
    background-color: black;
}
  </style>